<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <main>
        <!-- 轮播图 -->
        <div>
            <div class="swiper-container banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../image/banner01.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/banner02.jpg" alt=""></div>

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 运动健身 -->
        <div class="container">
            <div class="rank-punch">
                <div class="rank" >今日排名
                    <span class="nine" id="ranking">--</span>
                </div>
                <div class="punch">
                    <div class="leiji">累积打卡<span id="punchIn">--</span> 天</div>
                    <div class="day" id="play">今日打卡</div>
                </div>
            </div>

            <!-- 运动 -->

            <div class="sports mt20">
                <div class="sports-date">
               <div>运动数据</div>
                </div>
                <div class="sports-bange" id="sportsBange">
                    <div>运动累计徽章</div>
                    <div class="three"><span id="badge">--</span>枚</div>
                </div>
            </div>

            <!-- 课程训练 -->
            <div class="training mt20" id="training">
                <div>课程训练</div>
            </div>
            <!-- 户外跑步 -->
            <div class="run mt20" id="runClick">
                <div> 户外跑步</div>
            </div>
        </div>
    </main>
    <!-- 尾部 -->

</body>

</html>